
const div = document.createElement('div');
div.innerHTML = '🔥';
div.style.cssText = 'position:fixed; top:40%; left:-10px; transition:all 0.4s;font-size:20px;z-index:99999';
document.body.append(div);
let versionData = {};
chrome.runtime.sendMessage({
  type: "page-load",
  value: window.location.href,
});
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.type === "get-version") {
    console.table(request.data);
    versionData = request.data;
  }
});

div.addEventListener('mouseenter', () => {
  div.style.transform = 'translateX(10px)';
  div.style.background = 'white';
  div.style.boxShadow = '1px 1px 10px rgba(0,0,0.1)';

  div.innerHTML = `<style type="text/css">
  table#chrome-extension-gitee-version {
    width:800px;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  #chrome-extension-gitee-version h2 {
    margin: 10px;
    font-size: 24px;
  }
  #chrome-extension-gitee-version caption {
    caption-side: top;
    padding:0;
    text-align:center;

  }
  table#chrome-extension-gitee-version td,
  table#chrome-extension-gitee-version th {
    border: 1px solid #cad9ea;
    color: #666;
    padding: 10px;
    text-align:center;
  }
  
  table#chrome-extension-gitee-version thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table#chrome-extension-gitee-version tr:nth-child(odd) {
    background: #fff;
  }
  
  table#chrome-extension-gitee-version tr:nth-child(even) {
    background: #F5FAFA;
  }
  
  </style>
  
  <table id="chrome-extension-gitee-version">
  <caption>
    <h2> Gitee version</h2>
  </caption>
  <thead>
    <tr>
      <th>
        name
      </th>
      <th>
        prod
      </th>
      <th>
        alpha
      </th>
      <th>
        prod || alpha
      </th>
    </tr>
  </thead>
  <tr>
    <td>
      gitee
    </td>
    <td>
     ${versionData?.gitee?.prod}
    </td>
    <td>
    ${versionData?.gitee?.alpha}
    </td>
    <td>
      N/A
    </td>
  </tr>
  <tr>
    <td>
      ent
    </td>
    <td>
      N/A
    </td>
    <td>
    N/A
    </td>
    <td>
    ${versionData?.ent?.version}
    </td>
  </tr>
  <tr>
    <td>
      edu
    </td>
    <td>
    N/A
    </td>
    <td>
    N/A
    </td>
    <td>
    ${versionData?.edu?.version}
    </td>
  </tr>
  </table>`;
});
div.addEventListener('mouseleave', () => {
  div.style.transform = 'translateX(0px)';
  div.style.background = '';
  div.style.boxShadow = '';
  div.innerHTML = '🔥';
});